<template>
    <div class="source_materials_container">
        <div v-if="[1, 4].includes(+pro.shop_type)" class="button_box">
            <span :class="[formData.stage_state == 0 ? 'btn active' : 'btn']" @click="onStatus(0)"> 商品素材 </span>
            <span :class="[formData.stage_state == 1 ? 'btn active' : 'btn']" @click="onStatus(1)"> 页面素材 </span>
        </div>
        <!-- 客易达商品素材 -->
        <div v-if="formData.stage_state == 0" class="source_materials_main">
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                class="table-box custom-store-table"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @select="onSelect"
                @select-all="onSelectAll">
                <template #headerOperateLeft>
                    <div v-if="shop_item.sync_line != SyncLine['RPA_SYNC_LINE']" class="sync_time">
                        <div v-if="shop_item?.product_sync_time" class="text">
                            最近同步时间： {{ shop_item?.product_sync_time }}
                        </div>
                        <el-tooltip class="box-item" effect="light" placement="top">
                            <template #content>
                                <div style="max-width: 220px; margin-bottom: -6px">
                                    <p style="color: #666; font-size: 12px; line-height: 1.6; margin-bottom: 6px">
                                        同步的商品是从最近同步时间开始到当前时间的增量商品
                                    </p>
                                </div>
                            </template>
                            <el-button :icon="RefreshRight" @click="handleDoDirectSync"> 同步商品 </el-button>
                        </el-tooltip>
                    </div>
                </template>
                <template v-if="[7, 10].includes(+pro.shop_type)" #headerOperate>
                    <el-button type="primary" @click="importGoods(pro.shop_type)"> 导入商品 </el-button>
                </template>
            </ZwTable>
        </div>
        <!-- 客易达页面素材 -->
        <div v-if="formData.stage_state == 1" class="source_materials_main">
            <ZwSearchForm row-num="3" :option="searchOptionTwo" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRefTwo"
                class="table-box custom-store-table"
                :option="tableOptionTwo"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @select="onSelect"
                @select-all="onSelectAll">
                <template v-if="![1, 4].includes(+pro.shop_type)" #headerOperateLeft>
                    <div v-if="shop_item.sync_line != SyncLine['RPA_SYNC_LINE']" class="sync_time">
                        <div v-if="shop_item?.product_sync_time" class="text">
                            最近同步时间：{{ shop_item?.product_sync_time }}
                        </div>
                        <el-tooltip class="box-item" effect="light" placement="top">
                            <template #content>
                                <div style="max-width: 220px; margin-bottom: -6px">
                                    <p style="color: #666; font-size: 12px; line-height: 1.6; margin-bottom: 6px">
                                        同步的商品是从最近同步时间开始到当前时间的增量商品
                                    </p>
                                </div>
                            </template>
                            <el-button :icon="RefreshRight" @click="handleDoDirectSync"> 同步商品 </el-button>
                        </el-tooltip>
                    </div>
                </template>
            </ZwTable>
        </div>
        <!--导入商品-->
        <Dialog :app-dialog="appDialogImportOrders">
            <el-form
                ref="importOrdersFormRef"
                :model="importOrdersForm"
                :rules="importGoodsFormRules"
                label-width="auto">
                <el-form-item label="上传文件" prop="file_path">
                    <upload-file
                        v-model="importOrdersForm.file_path"
                        :import-type="importType"
                        :shop-item="shop_item"
                        @change="changeFile" />
                </el-form-item>
                <el-form-item label="商品信息" prop="handle_way">
                    <div>{{ tips }}</div>
                    <el-radio-group v-model="importOrdersForm.handle_way">
                        <el-radio :label="1" size="large"> 跳过商品 </el-radio>
                        <el-radio :label="2" size="large"> 更新商品 </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
    <!-- 预览弹窗 -->
    <ProductPopup ref="ProductPopupRef" :product-popup-data="ProductPopupData" />
    <!-- 浏览明细 -->
    <ClubDrew ref="ClubDrewRef" :rowid="rowid" :stagetype="stagetype"></ClubDrew>
    <!-- 推广弹窗 -->
    <TaoDialog ref="taoDialogRef" />
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted, computed, watch, defineExpose, defineProps } from 'vue';
import useClipboard from 'vue-clipboard3';
import { ElMessage, ElImage, ElPopover, ElButton, ElIcon, FormInstance } from 'element-plus';
import type { FormRules } from 'element-plus';
import { Picture as IconPicture, RefreshRight } from '@element-plus/icons-vue';
import { productList, pageList, doDirectSync, importProduct } from '@/api/highMaterial/sourceMaterials';
import { custSyncResult } from '@/api/customerCenter/groupManage';
import uploadFile from './upoadFile.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
// import ZwTable from '@/components/zw/table/Table';
import ZwTable from '@/components/zw/table1.0/Table';
import ProductPopup from './ProductPopup.vue';
import Dialog from '@/components/Dialog.vue';
import ClubDrew from './ClubDrew.vue';
import { useRouter } from 'vue-router';
import { deepCopy } from '@/utils/helper';
import { SyncLine } from '@/const/ecommerce';
import TaoDialog from './TaoDialog.vue';

const DeletdialogRef: any = ref(null);
const importOrdersFormRef = ref<FormInstance>();
const pro = defineProps(['active', 'shop_id', 'shop_type', 'shop_item']);
const router = useRouter();
const checkList = ref([]);
const ProductPopupRef = ref(null);
const ProductPopupData = ref([]);
const ClubDrewRef = ref(null);
const rowid = ref(null);
const stagetype = ref(null);
const tips = ref<string>('商品ID、规格ID相同时，请选择以下处理方式：');
type importOrdersFormType = {
    retail_shop_id: number | string;
    handle_way: number | string;
    file_path: string;
};
const importOrdersForm = reactive<importOrdersFormType>({
    retail_shop_id: pro.shop_id, //店铺id
    handle_way: 1,
    file_path: ''
});
const defaultParams = {
    shop_id: pro.shop_id, //店铺id
    goods_info: '', //商品信息
    goods_status: 0, //商品状态， 0：全部，1：下架 2：上架 3：已失效
    stock_status: 0, //库存状态 0：全部 1：正常 2：异常
    sale_price: [], //售卖价格
    page_name: '', //页面名称
    page_status: 0 //页面状态0：全部 1：正常 2：异常
};
const importGoodsFormRules = reactive<FormRules>({
    handle_way: [{ required: true, message: '请选择商品信息', trigger: 'change' }],
    file_path: [{ required: true, message: '请上传文件', trigger: 'change' }]
});
const cancelHandel = () => {
    appDialogImportOrders.visible = false;
};
const submitHandel = async () => {
    if (!importOrdersFormRef.value) return;
    await importOrdersFormRef.value.validate((valid: any): void => {
        if (valid) {
            submitDetai();
        }
    });
};
const submitDetai = async () => {
    const { job_id: job_id = '' } = await importProduct(importOrdersForm);
    custSyncResult({ jobid: job_id, type: 12 }).then((res: any) => {
        const strArr = res.job_msg.split(';');
        const obj = {};
        strArr.forEach((e: any) => {
            obj[e.split('：')[0]] = e.split('：')[1];
        });
        ElMessage.success(`导入成功: 其中成功创建${obj['success']}条商品，失败${obj['fail']}条`);
        tableRef.value.reload();
        appDialogImportOrders.visible = false;
    });
};
const appDialogImportOrders = reactive<any>({
    visible: false,
    title: '导入商品',
    width: '600px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
//下载模版类型 默认为 7-》抖店
const importType = ref(7);
//导入商品
const importGoods = (type: any) => {
    importType.value = type;
    appDialogImportOrders.visible = true;
};
const changeFile = () => {
    importOrdersFormRef.value.clearValidate();
};
const formData: any = reactive({
    stage_state: 0 // 0电商素材1页面素材
});
const handleDoDirectSync = async () => {
    const data: any = await doDirectSync({
        retail_shop_id: +pro.shop_id
    });
    // eslint-disable-next-line vue/no-mutating-props
    pro.shop_item.product_sync_time = data.product_sync_time;
    ElMessage.success('同步成功');
    if (formData.stage_state == 1) {
        tableRefTwo.value.clearSelection();
        tableRefTwo.value.clearSelection();
    } else {
        tableRef.value.clearSelection();
        tableRef.value.clearSelection();
    }
};
// 复制
const { toClipboard } = useClipboard();
const onCopy = async (v: any) => {
    try {
        await toClipboard(v);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};
// 分享
const onShare = async row => {
    if (row.description == '') {
        onCopy(
            '这里是我的好物分享，快去查看吧！' + '[' + row.product_name + ']' + '点击查看:' + '[' + row.h5_url + ']'
        );
    } else {
        onCopy(
            '这里是我的好物分享，快去查看吧！' +
                '[' +
                row.product_name +
                ']' +
                '[' +
                row.description +
                '];' +
                '点击查看:' +
                '[' +
                row.h5_url +
                ']'
        );
    }
};
const onStatus = (v: number) => {
    formData.stage_state = v;
    // onSubmit()
};

const tableRef = ref();
const tableRefTwo = ref();
const state = reactive({
    searchParams: deepCopy(defaultParams),
    searchHeight: '112px'
});
const searchOption = computed(() => {
    return [
        {
            label: '商品信息',
            name: 'goods_info',
            value: '',
            type: 'input',
            placeholder: '请输入商品ID/名称/描述搜索'
        },
        {
            label: '商品状态',
            name: 'goods_status',
            value: '',
            type: 'select',
            placeholder: '请选择商品状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: 0 },
                            { name: '已上架', id: 2 },
                            { name: '已下架', id: 1 },
                            { name: '已失效', id: 3 }
                        ]);
                    }, 100);
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '库存状态',
            name: 'stock_status',
            value: '',
            type: 'select',
            placeholder: '请选择库存状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: 0 },
                            { name: '正常', id: 1 },
                            { name: '异常', id: 2 }
                        ]);
                    }, 300);
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '售卖价格 ￥',
            name: 'sale_price',
            unit: '元',
            value: [],
            precision: 2,
            type: 'section'
        }
    ];
});
const searchOptionTwo = computed(() => {
    return [
        {
            label: '页面名称',
            name: 'page_name',
            value: '',
            type: 'input',
            placeholder: '请输入页面名称'
        },
        {
            label: '页面状态',
            name: 'page_status',
            value: '',
            type: 'select',
            placeholder: '请选择页面状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: 0 },
                            { name: '正常', id: 1 },
                            { name: '异常', id: 2 }
                        ]);
                    }, 100);
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});

const search = (v: any) => {
    if (formData.stage_state == 0) {
        tableRef.value.clearSelection();
    } else if (formData.stage_state == 1) {
        tableRefTwo.value.clearSelection();
    }
    state.searchParams = {
        ...deepCopy(defaultParams),
        ...v
    };
};
const reset = (v: any) => {
    if (formData.stage_state == 0) {
        tableRef.value.clearSelection();
    } else if (formData.stage_state == 1) {
        tableRefTwo.value.clearSelection();
    }
    state.searchParams = { ...deepCopy(defaultParams) };
};

// const rowData = ref < any > {}
const onAudit = (row: any) => {
    // rowData.value = row
    DeletdialogRef.value.appDialog.title = '提交审核';
    DeletdialogRef.value.content = '您确定要提交审核吗？';
    DeletdialogRef.value.appDialog.visible = true;
};

// 电商素材表格
const tableOption = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'id',
        minWidth: 120,
        label: '素材ID'
    },
    {
        prop: 'external_product_id',
        minWidth: 140,
        label: '商品ID',
        render({ row }) {
            return (
                <>
                    <div class="mulit-text-overflow">
                        <el-tooltip
                            class="box-item"
                            placement="top"
                            content={row.external_product_id}
                            disabled={!row.external_product_id}>
                            <span> {row.external_product_id || '--'}</span>
                        </el-tooltip>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'product_name',
        label: '商品信息',
        minWidth: 260,
        render({ row, column, index }) {
            return (
                <>
                    <div
                        style="cursor: pointer"
                        onClick={() => {
                            ProductPopupData.value = row;
                            if (row.source == 10) {
                                const arr =
                                    typeof row.graphic_details == 'string'
                                        ? JSON.parse(row.graphic_details)
                                        : row.graphic_details;
                                ProductPopupData.value.graphic_details = arr;
                            }
                            ProductPopupRef.value.drawer = true;
                        }}>
                        <div class="rowtable">
                            <ElImage src={row.cover} style="width: 48px; height: 48px;min-width:48px;" />
                            <span>{row.product_name}</span>
                        </div>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'category_name',
        label: '类目',
        width: 140,
        render({ row }) {
            return (
                <>
                    <div class="mulit-text-overflow">
                        <el-tooltip
                            class="box-item"
                            placement="top"
                            content={row.category_name}
                            disabled={!row.category_name}>
                            <span>{row.category_name || '--'}</span>
                        </el-tooltip>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'specifications',
        label: '规格',
        width: 200,
        render({ row, column, index }) {
            return (
                <div>
                    {row.specifications == 0 ? (
                        <span> 统一规格</span>
                    ) : (
                        <el-popover placement="top-start">
                            {{
                                reference: () => (
                                    <div class="tags-list zw-el-tags">
                                        {row.specifications?.map((item: any, index: any) => {
                                            return <el-tag>{item.name}</el-tag>;
                                        })}
                                    </div>
                                ),
                                default: () => (
                                    <el-scrollbar max-height="320px" class="zw-el-tags">
                                        <div>
                                            {row.specifications?.map((item: any, index: any) => {
                                                return <el-tag>{item.name}</el-tag>;
                                            })}
                                        </div>
                                    </el-scrollbar>
                                )
                            }}
                        </el-popover>
                    )}
                </div>
            );
        }
    },
    {
        prop: 'original_price',
        label: '原价',
        width: 200,
        render({ row, column, index }) {
            return row.min_original_price != row.max_original_price ? (
                <>
                    ￥{row.min_original_price}-¥{row.max_original_price}
                </>
            ) : (
                <>￥{row.max_original_price}</>
            );
        }
    },
    {
        prop: 'min_price',
        label: '售卖价格',
        width: 200,
        render({ row, column, index }) {
            return (
                <div>
                    {row.min_price == row.max_price ? (
                        <span> ￥{row.min_price}</span>
                    ) : (
                        <span>
                            {' '}
                            ￥{row.min_price}-￥{row.max_price}
                        </span>
                    )}
                </div>
            );
        }
    },
    {
        prop: 'state_name',
        label: '商品状态',
        width: 130
    },
    {
        prop: 'total_stock',
        label: '总库存',
        width: 130
    },
    {
        prop: 'stock_name',
        label: '库存状态',
        width: 130
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 170
    },
    {
        prop: 'operate',
        label: '操作',
        width: 295,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: 'H5链接',
                isRender: ({ row }: any) => !!row.h5_url,
                click: (row: any) => onCopy(row.h5_url)
            },
            {
                name: '分享文案',
                isRender: ({ row }: any) => !!row.h5_url,
                click: (row: any) => onShare(row)
            },
            {
                name: '浏览明细',
                // 1 客易达   2 有赞   3 淘宝   4 自营   5 线下门店   6 天猫   7 抖店   8 京东  9 视频号小店  10 快手小店
                isRender: ({ row }: any) => [1].includes(+pro.shop_type),
                click: (row: any) => {
                    ClubDrewRef.value.drawerlist = true;
                    ClubDrewRef.value.draweopen({
                        type: 1,
                        material_id: row.external_product_id
                    });
                }
            },
            {
                name: '商品详情',
                isRender: ({ row }: any) => !!row.h5_url,
                click: (row: any) => window.open(row.h5_url)
            },
            {
                name: '活动推广',
                // is_open_promotion 是否开启推广活动  1-否 2-是
                isRender: () => pro?.shop_item?.is_open_promotion == 2,
                click: (row: any) => taoDialogHandler(row)
            }
        ]
    }
];

// 如果是淘宝店铺，隐藏操作栏
// if (pro.shop_type == 3 || pro.shop_type == 9) {
//     tableOption.pop();
//     tableOption.push({
//         prop: 'operate',
//         label: '操作',
//         width: 120,
//         fixed: 'right',
//         isOperate: true,
//         renderOperate({ row }) {
//             return (
//                 <>
//                     {/* todo:活动推广 */}
//                     {/* is_open_promotion 是否开启推广活动  1-否 2-是  */}
//                     <ElButton
//                         v-show={pro?.shop_item?.is_open_promotion == 2}
//                         size="small"
//                         onClick={() => {
//                             taoDialogHandler(row);
//                         }}>
//                         活动推广
//                     </ElButton>
//                 </>
//             );
//         }
//     });
// }
// 页面素材表格
const tableOptionTwo = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'id',
        label: '素材ID',
        width: 200,
        render({ row }) {
            return (
                <>
                    <div class="mulit-text-overflow">
                        <el-tooltip class="box-item" placement="top" content={row.id} disabled={!row.id}>
                            <span>{row.id || '--'}</span>
                        </el-tooltip>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'external_page_id',
        label: '页面ID',
        width: 200,
        render({ row }) {
            return (
                <>
                    <div class="mulit-text-overflow">
                        <el-tooltip
                            class="box-item"
                            placement="top"
                            content={row.external_page_id}
                            disabled={!row.external_page_id}>
                            <span>{row.external_page_id || '--'}</span>
                        </el-tooltip>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'page_name',
        label: '页面名称',
        width: 200,
        render({ row, column, index }) {
            return row.h5_url ? (
                <a class="page-name" href={row.h5_url} target="_blank">
                    {row.page_name}
                </a>
            ) : (
                <span class="page-name-noturl">{row.page_name}</span>
            );
        }
    },
    {
        prop: 'description',
        label: '页面描述',
        width: 400,
        render({ row }) {
            return (
                <>
                    <div class="mulit-text-overflow">
                        <el-tooltip
                            class="box-item"
                            placement="top"
                            content={row.description}
                            disabled={!row.description}
                            raw-content>
                            <span v-html={row.description || '--'}></span>
                        </el-tooltip>
                    </div>
                </>
            );
        }
    },
    {
        prop: 'state_name',
        label: '页面状态',
        width: 200
    },
    {
        prop: 'updated_at',
        label: '更新时间',
        width: 200,
        render({ row, column, index }) {
            return row.updated_at || row.created_at;
        }
    },
    {
        prop: 'operate',
        label: '操作',
        width: 295,
        fixed: 'right',
        isOperate: true,
        // renderOperate({ row }) {
        //     return (
        //         <>
        //             {row.h5_url != '' ? (
        //                 <ElButton
        //                     size="small"
        //                     onClick={() => {
        //                         onCopy(row.h5_url);
        //                     }}>
        //                     h5链接
        //                 </ElButton>
        //             ) : (
        //                 ''
        //             )}

        //             <ElButton
        //                 size="small"
        //                 onClick={() => {
        //                     onCopy('这里是我的好物分享，快去查看吧！' + '点击查看:' + '[' + row.h5_url + ']');
        //                 }}>
        //                 分享文案
        //             </ElButton>
        //             <ElButton
        //                 size="small"
        //                 vShow={row.source == 4 || row.source == 1}
        //                 onClick={() => {
        //                     ClubDrewRef.value.drawerlist = true;
        //                     ClubDrewRef.value.draweopen({ type: 2, material_id: row.external_page_id });
        //                     // rowid.value = row.id
        //                     // stagetype.value = formData.stage_state
        //                 }}>
        //                 浏览明细
        //             </ElButton>
        //             <ElButton
        //                 v-show={pro?.shop_item?.is_open_promotion == 2}
        //                 size="small"
        //                 onClick={() => {
        //                     taoDialogHandler(row);
        //                 }}>
        //                 活动推广
        //             </ElButton>
        //         </>
        //     );
        // },
        option: [
            {
                name: 'H5链接',
                isRender: ({ row }: any) => !!row.h5_url,
                click: (row: any) => onCopy(row.h5_url)
            },
            {
                name: '分享文案',
                isRender: ({ row }: any) => !!row.h5_url,
                click: (row: any) => onCopy('这里是我的好物分享，快去查看吧！' + '点击查看:' + '[' + row.h5_url + ']')
            },
            {
                name: '浏览明细',
                isRender: ({ row }: any) => row.source == 4 || row.source == 1,
                click: (row: any) => {
                    ClubDrewRef.value.drawerlist = true;
                    ClubDrewRef.value.draweopen({ type: 2, material_id: row.external_page_id });
                }
            },
            {
                name: '活动推广',
                isRender: ({ row }: any) => pro?.shop_item?.is_open_promotion == 2,
                click: (row: any) => taoDialogHandler(row)
            }
        ]
    }
];

const getRowKey = (row: any) => {
    return row.id;
};

const fetchApi = () => {
    if (formData.stage_state == 0) {
        return productList;
    } else {
        return pageList;
    }
};
// 选中表格 checkbox
const onSelect = (selection, row) => {
    if (selection.constructor === Array) checkList.value = selection.map(v => v.id);
};
// 选择项变更
// 全选
const onSelectAll = selection => {
    checkList.value = selection.map(v => v.id);
};
// 刷新表格
const reloadTable = () => {
    tableRef.value.reload();
};
//跳转详情
const ondetail = (id: string) => {
    router.push('/salesleads/salesmanagement/ordermanagement/detail?id=' + id);
};

// 推广弹窗
const taoDialogRef = ref();
const taoDialogHandler = row => {
    // 淘口令弹窗
    taoDialogRef.value.handleOpen(row);
};

defineExpose({
    reloadTable
});
</script>

<style lang="scss" scoped>
.button_box {
    margin-bottom: 16px;

    .active {
        background-color: #fff1ed !important;
        color: #ff6b00;
    }

    .btn {
        padding: 11px;
        line-height: 41px;
        background-color: #f9f9f9;
        margin-right: 15px;
        margin-bottom: 16px;
        font-size: 14px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        cursor: pointer;

        &:hover {
            background-color: #fff1ed;
            color: #ff6b00;
        }
    }
}

.source_materials_container {
    height: calc(100vh - 261px);
    display: flex;
    flex-direction: column;

    .source_materials_main {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

:global(.mulit-text-overflow) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:global(.mulit-text-overflow > span *) {
    display: inline;
}

:deep(.imgslist) {
    display: flex;

    .name {
        color: #33302d;
        font-size: 14px;
        text-align: left;
        margin-left: 5px;
        width: 120px;

        p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .many {
            color: #969696;
            font-size: 12px;
        }
    }
}

:deep(.page-name) {
    color: #33302d;
    text-decoration: underline;
}

:deep(.page-name-noturl) {
    color: #33302d;
}

:deep(.rowtable) {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    span {
        margin-left: 10px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
    }
}

.sync_time {
    display: flex;
    align-items: center;

    .text {
        font-size: 14px;
        color: #333;
        margin-right: 12px;
    }
}

:deep(.tags-list) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:global(.form-materials-tags) {
    margin-bottom: 4px;
    margin-right: 4px;
}

.custom-store-table {
    :deep(td) {
        padding: 7.5px 0 !important;
        height: 64px;
        min-height: 64px;
    }
}
</style>
